function toCanvas(id, percent, width) {
    //canvas进度条
    var canvas = document.getElementById(id);
    var ctx = canvas.getContext("2d");

    // 画布
    canvas.width = width; //画布宽度
    canvas.height = width; //画布高度
    var circleX = width / 2; //中心x坐标
    var circleY = width / 2; //中心y坐标

    // 构建大圆参数
    var circleLine = 1;
    var circleRadius = width / 2 - circleLine / 2;

    // 构建扇形参数
    var sectorLine = 6;
    var sectorRadius = circleRadius - 15;

    function drawCircle() {
        ctx.beginPath();
        ctx.lineWidth = circleLine;
        ctx.strokeStyle = "#E5E5E5";
        ctx.arc(circleX, circleY, circleRadius, 0, Math.PI * 2);
        ctx.stroke();
    }

    function drawTitle() {
        ctx.font = "18px 微软雅黑";
        ctx.fillStyle = "#999999";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("得分", circleX, circleY - 60);
        ctx.save();
        ctx.restore();
    }

    function drawScore() {
        ctx.font = '99px 微软雅黑';
        ctx.fillStyle = "#333";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        var score = Math.round(percent * 10) / 10;
        ctx.fillText(score, circleX, circleY + 5); //圆环中间显示的文字和文字居中 
        ctx.save();
        ctx.restore();
    }

    function drawSector(i) {
        ctx.beginPath();
        ctx.lineWidth = sectorLine;
        ctx.lineCap = 'round';
        var starAngle = -0.2;

        var endAngle = -0.2;
        if (percent <= 50) {
            starAngle = 0.5;
            endAngle = 0.5;
        } else if (percent < 80) {
            starAngle = 0.1;
            endAngle = 0.1;
        } else if (percent < 90) {
            starAngle = -0.1;
            endAngle = -0.1;
        } else if (percent < 100) {
            endAngle = -0.25;
        }

        var linGrad = ctx.createLinearGradient(width, 0, 0, 0);
        if (percent < 60) {
            linGrad.addColorStop(0, '#fb9da9');
            linGrad.addColorStop(1, '#dd6b79');
        } else {
            linGrad.addColorStop(0, '#c0feee');
            linGrad.addColorStop(1, '#5fd3b5');
        }
        ctx.strokeStyle = linGrad;

        //圆弧
        if (percent != 0) {
            ctx.arc(circleX, circleY, sectorRadius, starAngle * Math.PI, endAngle * Math.PI + i * 0.02 * Math.PI, false);
        }
        ctx.stroke();
    }

    function loading() {
        if (process >= percent) {
            clearInterval(circleLoading);
        }

        if (process == 0) {
            //清除canvas内容
            ctx.clearRect(0, 0, width, width);

            drawCircle();
            drawTitle();
            drawScore();
        }

        drawSector(process);
        process++;
    }

    var process = 0; //进度
    var circleLoading = window.setInterval(function() {
        loading();
    },20);

}